<script setup name="{{ properCase componentName }}">
import api from "@/api";
import eventBus from "@/utils/eventBus";
import { usePagination } from "@/utils/composables";
import FormMode from "./modules/FormMode/index.vue";
import { listMenu, delMenu } from "@/api/system/menu";

const { pagination, getParams, onSizeChange, onCurrentChange, onSortChange } =
  usePagination();
const router = useRouter();
// const route = useRoute()

const data = ref({
  loading: false,
  /**
   * 详情展示模式
   * router 路由跳转
   * dialog 对话框
   * drawer 抽屉
   */
  formMode: "drawer",
  // 详情
  formModeProps: {
    visible: false,
    id: ""
  },
  // 搜索
  search: {
    title: "",
    type: "0"
  },
  // 批量操作
  batch: {
    enable: false,
    selectionDataList: []
  },
  // 列表数据
  dataList: []
});

onMounted(() => {
  getDataList();
  if (data.value.formMode === "router") {
    eventBus.on("get-data-list", () => {
      getDataList();
    });
  }
});

onBeforeUnmount(() => {
  if (data.value.formMode === "router") {
    eventBus.off("get-data-list");
  }
});

function getDataList() {
  data.value.loading = true;
  let params = getParams();
  data.value.search.menuName && (params.title = data.value.search.menuName);
  data.value.search.type && (params.type = data.value.search.type);
  listMenu(params).then((res) => {
    data.value.loading = false;
    data.value.dataList = res.data.map((item, index) => {
      return Object.assign(item, { hasChildren: true });
    });
    // pagination.value.total = res.data.total;
  });
}

// 每页数量切换
function sizeChange(size) {
  onSizeChange(size).then(() => getDataList());
}

// 当前页码切换（翻页）
function currentChange(page = 1) {
  onCurrentChange(page).then(() => getDataList());
}

// 字段排序
function sortChange(prop, order) {
  onSortChange(prop, order).then(() => getDataList());
}

function onCreate() {
  if (data.value.formMode === "router") {
    router.push({
      name: "routerName"
    });
  } else {
    data.value.formModeProps.id = "";
    data.value.formModeProps.visible = true;
  }
}

function onEdit(row) {
  data.value.formMode = "drawer";
  if (data.value.formMode === "router") {
    router.push({
      name: "routerName",
      params: {
        id: row.id
      }
    });
  } else {
    data.value.formModeProps.id = row.id;
    data.value.formModeProps.visible = true;
  }
}
function onAdd() {
  data.value.formModeProps.id = "";
  data.value.formMode = "dialog";
  data.value.formModeProps.visible = true;
}
function load(tree, treeNode, resolve) {
  console.log(tree, treeNode, resolve);
  listMenu(getParams().value, tree.id, "1").then((res) => {
    resolve(
      res.data.map((item, index) => {
        return Object.assign(item, {
          hasChildren: item.menuType != "F" ? true : false
        });
      })
    );
  });
}
function onDel(row) {
  ElMessageBox.confirm(`确认删除「${row.menuName}」菜单吗？`, "确认信息")
    .then(() => {
      delMenu(row.id).then((res) => {
        getDataList();
        if (res.code == 200)
          ElMessage.success({
            message: "删除成功",
            center: true
          });
      });
    })
    .catch(() => {});
}
const activeName = ref("first");

const handleClick = (tab, event) => {
  if (tab.paneName == "second") {
    data.value.search.type = "1";
    getDataList();
  } else {
    data.value.search.type = "0";
    getDataList();
  }
};
</script>

<template>
  <div>
    <!-- <page-header title="{{ cname }}管理" /> -->
    <page-main style="height: calc(100vh - 160px); margin: 10px">
      <!-- <el-button type="primary" size="large" @click="onCreate">
        <template #icon>
          <el-icon>
            <svg-icon name="ep:plus" />
          </el-icon>
        </template>
        新增{{ cname }}
      </el-button> -->
      <search-bar>
        <el-form
          :model="data.search"
          size="default"
          label-width="auto"
          label-suffix=""
        >
          <el-row :gutter="10">
            <el-col :span="5">
              <el-form-item label="菜单名称">
                <el-input
                  v-model="data.search.menuName"
                  placeholder="请输入菜单名称"
                  clearable
                  @keydown.enter="currentChange()"
                  @clear="currentChange()"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button type="primary" @click="currentChange()">
                  <template #icon>
                    <el-icon>
                      <svg-icon name="ep:search" />
                    </el-icon>
                  </template>
                  查询
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </search-bar>
      <el-row>
        <el-col :span="24" style="text-align: right">
          <el-button type="primary" @click="onAdd">
            <template #icon>
              <el-icon>
                <svg-icon name="ep:circle-plus" />
              </el-icon>
            </template>
            新增
          </el-button>
        </el-col>
      </el-row>

      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="平台菜单" name="first">
          <el-table
            ref="table"
            v-loading="data.loading"
            class="list-table"
            :data="data.dataList"
            border
            highlight-current-row
            row-key="id"
            :lazy="true"
            :load="load"
            @sort-change="sortChange"
            @selection-change="data.batch.selectionDataList = $event"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            >
            <el-table-column type="selection" align="center" />

            <el-table-column prop="menuName" label="菜单名称">
              <template v-slot="scope">
                <!-- <svg-icon :name="scope.row.icon"></svg-icon> -->
                <span>{{ scope.row.menuName }}</span></template
              >
            </el-table-column>
            <el-table-column prop="icon" label="图标" width="60" align="center">
              <template v-slot="scope">
                <svg-icon
                  :name="scope.row.icon"
                  v-if="scope.row.menuType != 'F'"
                ></svg-icon>
                <!-- <span>{{ scope.row.menuName }}</span>-->
              </template>
            </el-table-column>

            <el-table-column prop="menuCode" label="菜单编码" />

            <el-table-column prop="perms" label="权限标识">
              <template v-slot="scope">
                {{ scope.row.perms }}
              </template>
            </el-table-column>
            <el-table-column prop="component" label="组件路径" />

            <el-table-column
              prop=""
              label="菜单类型"
              width="100"
              align="center"
            >
              <template v-slot="scope">
                <el-tag v-if="scope.row.menuType == 'M'" effect="Light">
                  目录
                </el-tag>
                <el-tag v-if="scope.row.menuType == 'F'" effect="Light">
                  按钮
                </el-tag>
                <el-tag
                  effect="Light"
                  v-if="scope.row.menuType == 'C'"
                  type="warning"
                  >菜单
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="isFrame"
              label="是否外链"
              width="90"
              align="center"
            >
              <template v-slot="scope">
                <el-tag
                  v-if="scope.row.status === '1'"
                  effect="plain"
                  type="danger"
                  >是</el-tag
                >
                <el-tag v-else effect="plain">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="treeSort" label="排序" width="80">
              <template v-slot="scope">
                <el-tag type="info" effect="plain">{{
                  scope.row.treeSort
                }}</el-tag></template
              >
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80">
              <template v-slot="scope">
                <el-tag v-if="scope.row.status === '0'" effect="plain"
                  >正常</el-tag
                >
                <el-tag v-else type="danger" effect="plain">停用</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="160" align="center">
              <template #default="scope">
                <el-button-group>
                  <el-button
                    type="primary"
                    size="small"
                    text
                    @click="onEdit(scope.row)"
                  >
                    <template #icon>
                      <el-icon>
                        <svg-icon name="ant-design:edit-filled" />
                      </el-icon>
                    </template>
                    编 辑</el-button
                  >
                  <el-button
                    type="danger"
                    text
                    size="small"
                    @click="onDel(scope.row)"
                  >
                    <template #icon>
                      <el-icon>
                        <svg-icon name="ep:close-bold" :size="20" />
                      </el-icon>
                    </template>
                    删除
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="商户菜单" name="second">
          <el-table
            ref="table"
            v-loading="data.loading"
            class="list-table"
            :data="data.dataList"
            border
            highlight-current-row
            row-key="id"
            :lazy="true"
            :load="load"
            @sort-change="sortChange"
            @selection-change="data.batch.selectionDataList = $event"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            >
            <el-table-column type="selection" align="center" />

            <el-table-column prop="menuName" label="菜单名称">
              <template v-slot="scope">
                <!-- <svg-icon :name="scope.row.icon"></svg-icon> -->
                <span>{{ scope.row.menuName }}</span></template
              >
            </el-table-column>
            <el-table-column prop="icon" label="图标" width="60" align="center">
              <template v-slot="scope">
                <svg-icon
                  :name="scope.row.icon"
                  v-if="scope.row.menuType != 'F'"
                ></svg-icon>
                <!-- <span>{{ scope.row.menuName }}</span>-->
              </template>
            </el-table-column>

            <el-table-column prop="menuCode" label="菜单编码" />

            <el-table-column prop="perms" label="权限标识">
              <template v-slot="scope">
                {{ scope.row.perms }}
              </template>
            </el-table-column>
            <el-table-column prop="component" label="组件路径" />

            <el-table-column
              prop=""
              label="菜单类型"
              width="100"
              align="center"
            >
              <template v-slot="scope">
                <el-tag v-if="scope.row.menuType == 'M'" effect="Light">
                  目录
                </el-tag>
                <el-tag v-if="scope.row.menuType == 'F'" effect="Light">
                  按钮
                </el-tag>
                <el-tag
                  effect="Light"
                  v-if="scope.row.menuType == 'C'"
                  type="warning"
                  >菜单
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="isFrame"
              label="是否外链"
              width="90"
              align="center"
            >
              <template v-slot="scope">
                <el-tag
                  v-if="scope.row.status === '1'"
                  effect="plain"
                  type="danger"
                  >是</el-tag
                >
                <el-tag v-else effect="plain">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="treeSort" label="排序" width="80">
              <template v-slot="scope">
                <el-tag type="info" effect="plain">{{
                  scope.row.treeSort
                }}</el-tag></template
              >
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80">
              <template v-slot="scope">
                <el-tag v-if="scope.row.status === '0'" effect="plain"
                  >正常</el-tag
                >
                <el-tag v-else type="danger" effect="plain">停用</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="160" align="center">
              <template #default="scope">
                <el-button-group>
                  <el-button
                    type="primary"
                    size="small"
                    text
                    @click="onEdit(scope.row)"
                  >
                    <template #icon>
                      <el-icon>
                        <svg-icon name="ant-design:edit-filled" />
                      </el-icon>
                    </template>
                    编 辑</el-button
                  >
                  <el-button
                    type="danger"
                    text
                    size="small"
                    @click="onDel(scope.row)"
                  >
                    <template #icon>
                      <el-icon>
                        <svg-icon name="ep:remove" :size="20" />
                      </el-icon>
                    </template>
                    删除
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table></el-tab-pane
        >
      </el-tabs>
    </page-main>
    <FormMode
      v-if="['dialog', 'drawer'].includes(data.formMode)"
      :id="data.formModeProps.id"
      v-model="data.formModeProps.visible"
      :mode="data.formMode"
      @success="getDataList"
    />
  </div>
</template>

<style lang="scss" scoped>
.el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
